<template>
	<!--通告详细-->
	<view class="page-content">
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--动态-->
			<template v-if="datalist && datalist.length > 0 ">
				<block v-for="(item,index) in datalist" :key="index">
					<view class="body-box">
						<view class="box-tit">通知：{{item.title}}</view>
						<rich-text class="box-txt" :nodes='item.content' decode='true'></rich-text>
						<view class="box-name">{{item.nickname}}
							<view class="box-time">{{item.create_time}}</view>
						</view>
					</view>
				</block>
				<!-- 上拉加载 -->
				<view class="det-con-more">
					<load-more :loadmore="load_more"></load-more>
				</view>
			</template>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</scroll-view>
	</view>
</template>

<script>
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getNoticeList
	} from '@/common/api.js';
	export default {
		components: {
			loadMore
		},
		data() {
			return {
				scrollTop: 0,
				noData: false,
				load_more: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				sel_data: [],
				datalist: [
					/* {
										id:1,
										title:'疫情通知',
										remarks:'各子分公司、部门：为进一步做好疫情防控，防止疫情蔓延，维护好我公司广大职员的生命健康，并共同维护一个健康安全的工作生产环境，经公司决定通知如下：1、我公司员工春节后上班时间暂定为：2020年xx月xx日，具体复工上班时间，将根据疫情情况而定另行通知。2、延迟放假期间公司高层在岗值班。3、保安、保洁在顺延假期期间值班按2020年春节值班表顺延执行。4、该通知根据疫情变化及相关政策进行适时调整，请大家继续留意公司最新通知。请各位员工在家做好自我防护及自我检测，积极响应国家号召做好新型冠状病毒感染的肺炎疫情防控工作。',
										name:'胖虎',
										time:'2020-10-20 11：26'
									},{
										id:2,
										title:'疫情通知',
										remarks:'各子分公司、部门：为进一步做好疫情防控，防止疫情蔓延，维护好我公司广大职员的生命健康，并共同维护一个健康安全的工作生产环境，经公司决定通知如下：1、我公司员工春节后上班时间暂定为：2020年xx月xx日，具体复工上班时间，将根据疫情情况而定另行通知。2、延迟放假期间公司高层在岗值班。3、保安、保洁在顺延假期期间值班按2020年春节值班表顺延执行。4、该通知根据疫情变化及相关政策进行适时调整，请大家继续留意公司最新通知。请各位员工在家做好自我防护及自我检测，积极响应国家号召做好新型冠状病毒感染的肺炎疫情防控工作。',
										name:'胖虎',
										time:'2020-10-20 11：26'
									},{
										id:3,
										title:'疫情通知',
										remarks:'各子分公司、部门：为进一步做好疫情防控，防止疫情蔓延，维护好我公司广大职员的生命健康，并共同维护一个健康安全的工作生产环境，经公司决定通知如下：1、我公司员工春节后上班时间暂定为：2020年xx月xx日，具体复工上班时间，将根据疫情情况而定另行通知。2、延迟放假期间公司高层在岗值班。3、保安、保洁在顺延假期期间值班按2020年春节值班表顺延执行。4、该通知根据疫情变化及相关政策进行适时调整，请大家继续留意公司最新通知。请各位员工在家做好自我防护及自我检测，积极响应国家号召做好新型冠状病毒感染的肺炎疫情防控工作。',
										name:'胖虎',
										time:'2020-10-20 11：26'
									} */
				],
				type: '',
				id: '',
				formData: {
					company_id: '',
					page: 1,
					limit: 10
				},
				userType:''
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'selIndex'])
		},
		onShow() {
			this.getdata();
		},
		
		onLoad(option) {
			console.log(222, option)
			if (option.type === 'o') {
				this.type = option.type;
				this.id = option.id;
			} else if (option.type === 'm') {
				this.type = option.type;
			}
			if(option.userType){
				this.userType = option.userType;
				if(option.userType === 'index'){
					this.onNavigationBarButtonTaps(0) //隐藏原生标题栏按钮
				}
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(23, e)
			if (e.index == 0) {
				if(this.userType !== 'index'){
					uni.navigateTo({
					   url: '/pages/news/notificationEdit',
				    })
				}
			}
		},
		methods: {
			//隐藏原生标题栏按钮
			onNavigationBarButtonTaps(e) {
			  const currentWebview = this.$mp.page.$getAppWebview();
				//下面的方法即可修改文字内容及颜色等,e.index就表示修改当前点击按钮样式
				currentWebview.setTitleNViewButtonStyle(e, { //h5端会报错
					color: 'rgba(0,0,0,0)'
				});   
			},
			loadmore() {
				let _self = this;
				if (this.type === 'm') {
					_self.load_sta = true;
					_self.formData.page++;
					this.getdata(_self.formData);
				}
			},
			getdata() {
				this.formData.company_id = this.companyInfo.id;
				getNoticeList(this.formData).then(res => {
					if (res.code === 2000) {
						let datalist = res.data.data;
						if (datalist && datalist.length > 0) {

							if (this.load_sta) {
								if (datalist && datalist.length < 10) {
									this.load_more = '没有更多了';
									this.datalist = this.datalist.concat(datalist);
								} else {
									this.load_more = '加载中...';
									this.datalist = this.datalist.concat(datalist);
								}
							} else {
								if (datalist && datalist.length < 10) {
									console.log(23,this.type)
									if (this.type === 'm') {
										this.load_more = '没有更多了'
										this.datalist = datalist;
									} else if (this.type === 'o') {
										let datalist1 = [];
										datalist.forEach(item => {
											if (item.id === parseInt(this.id)) {
												datalist1.push(item)
											}
										})
										this.datalist = datalist1;
									}
								} else {
									this.load_more = '加载中...';
									this.datalist = this.datalist.concat(datalist);
								}
							}
						}
					}
				})
			},
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
		}
	}
</script>

<style lang="scss">
	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
		height: 40rpx;
	}

	.page-content {
		width: 100vw;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-body {
			display: flex;
			height: 100%;

			.body-box {
				display: flex;
				flex-direction: column;
				background: $uni-bg-color;
				margin-bottom: 10rpx;
				padding: 30rpx;

				.box-tit {
					font-size: 32rpx;
					font-weight: bold;
					color: $font-color-3;
					margin-bottom: 20rpx;
				}

				.box-txt {
					font-size: 26rpx;
					font-weight: 500;
					color: $font-color-9;
					line-height: 50rpx;
					margin-bottom: 20rpx;
				}

				.box-name {
					display: flex;
					font-size: 28rpx;
					font-weight: bold;
					color: $font-color-3;

					.box-time {
						margin-left: 20rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: $font-color-9;
					}
				}
			}

			.con-text {

				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #666;
				line-height: 50rpx;

				image {
					width: 100% !important;
					max-width: 100% !important;
				}
			}
		}
	}

	/* .page-content::before{
	  content: '';
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 2rpx;
	  background-color: #F8F8F8;
	  z-index: 9999;
	} */
</style>
